/* 1 页面数据渲染
  1 定义一个函数
  2 发送请求获取数据  渲染页面 
    1 token 几乎都是携带在请求头中   写法几乎定死!！！
2 点击修改数据 */
const tbody = document.querySelector('tbody');
// 获取数据渲染页面
async function getScore() {
    const result = await axios({
        url: '/score/list',
        // 如果没有携带token 请求失败 提示身份认证失败
        //  　请求头(对象)中　携带　　token 
        // headers: {
        //     // 一般就写这个名字，如果你的接口文档找不到说明，问后端确认
        //     Authorization: localStorage.getItem("token8788"),
        // }
    })
    console.log(result);
    // 生成html
    let html = ""
    for (const key in result.data.data) {
        // console.log(key); //对象中所有属性名
        // console.log(result.data.data[key]); //对象属性值
        const { name, score } = result.data.data[key]
        html += `<tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id="${key}" data-batch="1">${score[0]}</td>
        <td class="score" data-stu_id="${key}" data-batch="2">${score[1]}</td>
        <td class="score" data-stu_id="${key}" data-batch="3">${score[2]}</td>
        <td class="score" data-stu_id="${key}" data-batch="4">${score[3]}</td>
        <td class="score" data-stu_id="${key}" data-batch="5">${score[4]}</td>
      </tr> `
    }
    // 把html拼接到tbody中
    tbody.innerHTML = html

}
getScore()

// 绑定一个双击事件
tbody.addEventListener("dblclick", function (ev) {
    console.log('双击');
    // 判断是不是想要的元素(成绩)
    const target = ev.target  //td
    if (target.classList.contains('score')) {
        // 显示一个输入框
        const input = document.createElement('input');
        input.type = 'text'
        input.value = target.innerText
        // 插入对应的位置 设置css样式input为block
        target.appendChild(input)
        // 设置 input 标签获得焦点
        input.focus()

        // 绑定失去焦点事件
        // input.addEventListener('blur', async function () {
        //     updateScore()
        // })
        input.addEventListener("click", updateScore)
        // 绑定按下回车事件
        input.addEventListener("keyup", function (inputEv) {
            // 判断按下的是不是回车
            if (inputEv.key === 'Enter') {
                // 事件解绑 键盘回车也会触发失去焦点
                // input.removeEventListener("事件类型","处理函数 有名称的函数 不能是匿名函数")
                input.removeEventListener("blur", updateScore)
                updateScore()
            }
        })

        // 执行获取数据 修改数据
        async function updateScore() {
            // 获取参数 发送请求 完成修改
            // 获取参数： id,第几次成绩，分数
            // console.log(target.dataset); //以对象形式存放了target中的自定义属性。
            const { stu_id, batch } = target.dataset
            const score = input.value
            const result = await axios({
                url: '/score/entry',
                method: 'post',
                data: { stu_id, batch, score }
            })
            if (result.data.code === 0) {
                toastr.success(result.data.message, '成功')
                // 刷新数据
                getScore()
            }
        }

    }
})

